<template>
  <div class="eaitInfo">
    <!-- 修改昵称 -->
    <sub-nav-bar
      :title="'修改' + titleObj[type]"
      :path="path"
      :right="right"
      @rightClick="save"
    ></sub-nav-bar>
    <div class="content">
      <!-- Field 输入框 -->
      <van-field
        v-if="type !== 'avatar'"
        class="field"
        v-model="inputValue"
        clearable
      ></van-field>
      <van-uploader
        v-else
        v-model="imgArr"
        max-count="1"
        :before-read="beforeRead"
        :after-read="afterRead"
        @delete="deleteEvent"
        clearable
      ></van-uploader>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { upload, auEdit } from '@/api/userInfo.js'
import subNavBar from '@/components/subNavBar.vue'
export default {
  name: 'editInfo',
  components: { subNavBar },
  data () {
    return {
      inputValue: '',
      right: '',
      type: this.$route.query.type,
      path: '/home/userInfo',
      titleObj: {
        nickname: '昵称',
        intro: '个人简介',
        position: '岗位',
        avatar: '头像'
      },
      // 头像
      imgArr: []
    }
  },
  methods: {
    // 读取前
    beforeRead (file) {
      const _type =
        file.type === 'image/png' ||
        file.type === 'image/jpeg' ||
        file.type === 'image/jpg'
      const _size = file.size / 1024 / 1024 < 2
      if (!_type) {
        this.$toast.fail('请上传png或者jpeg格式图片')
      }
      if (!_size) {
        this.$toast.fail('请上传小于2M的图片')
      }
      return _type && _size
    },
    // 读取后
    async afterRead (res) {
      const _formData = new FormData()
      _formData.append('files', res.file)
      this.$toast.loading({
        duration: 0
      })
      const res2 = await upload(_formData)
      // 上传头像成功后，将id储存到inpuValue
      this.inputValue = res2.data.data[0].id
      this.$toast.success('上传成功')
      // window.console.log(res2)
    },
    // 删除图片时触发
    deleteEvent () {
      this.inputValue = ''
    },
    async save () {
      // 加载中
      this.$toast.loading({ duration: 0 })
      await auEdit({
        [this.type]: this.inputValue
      })
      // 成功提示
      this.$toast.success('修改成功')
      // 跳转到用户信息页面
      this.$router.push(this.path)
      // 刷新用户信息
      this.$store.dispatch('refresUserInfo')
    }
  },
  watch: {
    inputValue (newValue) {
      if (newValue !== this.userInfo[this.type] && newValue !== '') {
        this.right = '保存'
      } else {
        this.right = ''
      }
    }
  },
  computed: {
    ...mapState(['userInfo'])
  },
  created () {
    this.inputValue = this.userInfo[this.type]
    // 如果是修改岗位后退则跳转回用户信息页面
    if (this.type === 'position') {
      this.path = '/home/user'
    }
    // 如果修改类型是avatar头像
    // 且头像地址存在就修改van-uploader组件的v-model的值第一项为一个图片地址
    if (this.type === 'avatar' && this.userInfo.avatar) {
      this.imgArr[0] = { url: this.$baseUrl + this.userInfo.avatar }
    }
  }
}
</script>

<style lang="less" scoped>
.eaitInfo {
  .content {
    text-align: center;
  }
}
</style>
